<template>
    <div>
        <h3>计算属性</h3>
        <p>{{ names.length > 0 ? 'Y' : 'N' }} </p>
        <p>{{ hasLength }} </p>
        <p>{{ hasLength }} </p>
        <p>{{ hasLength }} </p>
        <p>{{ hasLengthMethod() }} </p>
        <p>{{ hasLengthMethod() }} </p>
        <p>{{ hasLengthMethod() }} </p>
    </div>
</template>

<script>


export default {
    data () {
        return {
            names: ["a", "b", "c"],
        }
    },
    // 计算属性
    computed:{
        hasLength(){
            console.log("计算属性");
            return this.names.length > 0 ? "YES" : "NO";
        }
    },
    // 方法和计算属性可以达到相同效果，但是方法每次都会重新计算，而计算属性则不会，只有计算依赖更新时才会重新计算，也就是计算表达式中参数发生变更时才会重新计算
    methods:{
        hasLengthMethod(){
            console.log("方法计算");
            return this.names.length > 0 ? "YES" : "NO";
        }
    }
}
</script>
